<template>
    <!--components/popup/index.wxml-->
    <u-popup :show="isShow" @close="isShow=false" :closeIconColor="'#ffffff'" 
        :borderRadius="20" mode="bottom" 
        :mask-close-able="false" 
        :closeable="false">
		
		<view class="container">
			<view class="projectWrapper">
				<image class="logo" :src="shopInfo.logo" mode=""></image>

				<view class="name">
					{{shopInfo.name}}
				</view>
				<view class="">
					申请
				</view>
			</view>
      <!-- #ifdef MP-TOUTIAO -->
      <view v-if="titleType" class="title">
        获取您的手机号为您提供服务
      </view>
      <view v-else class="title">
        获取您的手机号为您提供服务
      </view>
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN ||MP-TOUTIAO  -->

			<view v-if="titleType" class="title">
				点我 可更好为您服务
			</view>
			<view v-else class="title">
				点我 可更好为您服务
			</view>
      <!-- #endif -->
			<view class="btnWrapper">
				<button v-if="!closeButtonAble" plain="true" 
					class="confirmOnly"
				    style="border: none;font-size: 32rpx;"
				    open-type="getPhoneNumber" 
				    @getphonenumber="getPhoneNumber">
				    允许
				</button>
				

				<template v-else>
					<view class="cancle" @click="close">
						取消
					</view>
					<button plain="true" class="confirm"
					    style="border: none;font-size: 32rpx;"
					    open-type="getPhoneNumber" 
					    @getphonenumber="getPhoneNumber">
					    允许
					</button>
				</template>	
			</view>
		</view>
		
    </u-popup>
</template>

<script>
    const api = require("@/static/js/api.js")
    const Config = require('@/config.js')
    import {
        mapState,
        mapMutations,
        mapActions
    } from 'vuex';
    export default {
        data() {
            return {
                isShow: false,
            };
        },
        computed: {
            ...mapState({
                hasLogin: state => state.userInfo.hasLogin,
                isAuthPhone: state => state.userInfo.isAuthPhone,
                isAuthUserInfo: state => state.userInfo.isAuthUserInfo, 
                isSeller: state => state.userInfo.isSeller,
                isReferrer: state => state.userInfo.isReferrer,
                sellerObj: state => state.userInfo.sellerObj,
                buyerObj: state => state.userInfo.buyerObj,
                shopInfo: state => state.userInfo.shopInfo,
            }),
        },
        components: {},
        props: {
            value: {
                type: Boolean
            },
            closeable: {
                type: Boolean,
                default: false,
            },
            closeButtonAble:{
                type: Boolean,
                default: true,
            },
            titleType: {
                type: Boolean,
                default: false,
            },
        },
        watch: {
            value: {
                handler: function observer(val) {
                    this.isShow = val;
                },
                immediate: true
            },
            isShow: {
                handler: function observer(val) {
                    var _this = this;
                    this.$emit('input', val)
                },
                immediate: true
            },

        },

        methods: {
            ...mapMutations(['setUserInfo', 'setLoginStatus', 'setUserId']),
            ...mapActions(['phoneAuth']),
            close(e) {
                let that = this
                that.isShow = false
                this.$emit('cancel');
            },

            getPhoneNumber(e) {
                let that = this
                let ev = e.detail;
                console.log(e)
                function __getPhone(){
                    uni.login({  
                        success: response => {
                            console.log("authPhone:", response, ev)
                            if (response.code) {
                                // 发送 res.code 到后台换取 openId, sessionKey, unionId                   
                                api.authPhone({
                                    param: {
                                        appid: Config.appId,
                                        code: response.code,
                                        encryptedData: ev.encryptedData,
                                        iv: ev.iv,
                                    }
                                }).then(res => {
                                    console.log("phoneAuth:", res)
                                    if (res.success){
                                        
                                        that.loginWechat().then(res => {
                                            console.log("手机授权成功")
                                            that.isShow = false
                                            that.$emit('confirm')
                                            //====如果是雇员直接重启
                                            if (that.shopInfo.isEnInvite&&that.isSeller){
                                                // uni.reLaunch({
                                                //     url:'/pages/home/home'
                                                // })
                                            }
                                        }).catch(res=>{
                                            // uni.showModal({
                                            //     title: '登录失败',
                                            //     content: "手机授权，登陆失败，，，"
                                            // });
                                        })
                                        
                                    }else{
                                        
                                    }
                                }).catch(() => {
                                    console.log("url参数错误！！")
                                })
                    
                            } else {
                                reject()
                                uni.showModal({
                                    title: '提示',
                                    content: '微信授权失败:' + response.errMsg,
                                    showCancel: false,
                                    success: function(res) {
                                        if (res.confirm) {
                                            console.log('用户点击确定');
                                        } else if (res.cancel) {
                                            console.log('用户点击取消');
                                        }
                                    }
                                });
                            }
                        },
                        complete: function() {
                            uni.hideLoading();
                        }
                    });
                }
                
                
                if (ev.encryptedData&&ev.iv){
                    uni.showLoading({
                        title: '正在授权...'
                    });
                    if (that.hasLogin){
                        __getPhone();
                    }else{
                       that.loginWechat().then(res => {
                           __getPhone();
                       }).catch(res=>{
                           uni.showModal({
                               title: '登录失败',
                               content: "手机授权，登陆失败，，，"
                           });
                       })
                    }
                }else{
                    
                }
            }
        }
    };
</script>


<style lang="scss">
	
	.container {
		width: 750rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding-bottom: env(safe-area-inset-bottom);
		.projectWrapper{
			margin-left: 20rpx;
			font-size: 29rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0rpx;
			line-height: 30rpx;
			color: #000000;
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			.logo{
				width: 57rpx;
				height: 57rpx;
				background-color: #f6f6f6;
				border-radius: 50%;
			}
			.name{
				margin-right: 15rpx;
				margin-left: 20rpx;
			}
						
		}
		.title{
			font-size: 32rpx;
			margin-top: 47rpx;
			margin-bottom: 64rpx;
			margin-left: 30rpx;
			color: #000000;
			font-weight: bold;
		}
		.btnWrapper{
			width: 750rpx;
			padding-bottom: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			.confirmOnly{
				width: 650rpx;
				height: 86rpx;
				background-color: #01ba55;
				border-radius: 5rpx;
				line-height: 86rpx;
				text-align: center;
				color: #ffffff;
			}
			.confirm{
				width: 245rpx;
				height: 86rpx;
				background-color: #01ba55;
				border-radius: 5rpx;
				line-height: 86rpx;
				text-align: center;
				color: #ffffff;
				margin: 0 0 0 30rpx;	
			}
			.cancle{
				width: 245rpx;
				height: 86rpx;
				background-color: #e8e9eb;
				border-radius: 5rpx;
				line-height: 86rpx;
				text-align: center;
				color: #01ba55;
			}
			
		}
	}

</style>
